<!--作者：彭心愉
描述：添加课程弹窗
修改人：彭心愉  -->
<template>
<div>
        <!-- <input
        type="text"
        class="header-input"
        placeholder="Please Input"
      /> -->

      <div class="content">
        <span class="titleText"><h2>新增课程</h2></span>
        <span class="down-icon" @click="backCourse"><img src="@/assets/icon/down.png" style="width: 55px; height: 55px;"></span>
        <hr class="langHr">
        <hr class="shortHr">
        <div></div>
        <form class="form">
            <el-row >
                日期
                <el-input  class="w-50 m-2 inputtext"  placeholder="申请提交日期" :suffix-icon="Calendar"/>
            </el-row> 
            <el-row>
                项目名称
                <el-input  class="w-50 m-2 inputtext"  placeholder="项目名称"/>
            </el-row>
            <el-row>
                责任老师
                <el-input  class="w-50 m-2 inputtext"  placeholder="责任老师"/>
            </el-row>
            <el-row>
                实训老师
                <el-input  class="w-50 m-2 inputtext"  placeholder="实训老师"/>
            </el-row>
            <el-row>
                签到时间
                <el-input  class="w-50 m-2 inputtext"  placeholder="申请提交日期" :suffix-icon="Calendar"/>
            </el-row>  
            <el-row>
                签退时间
                <el-input  class="w-50 m-2 inputtext"  placeholder="申请提交日期" :suffix-icon="Calendar"/>
            </el-row>  
            <el-row class="input-last">
                教室
                <el-input  class="w-50 m-2 inputtext"  placeholder="教室"/>
            </el-row>
            <el-row class="textarea">
                备注
                <el-input  class="w-50 m-2 inputtext"  placeholder="请输入备注" type="textarea"  maxlength="30"/>
            </el-row>     
              <el-button color="#3e94ad" class="btn" >保存</el-button>  
        </form>
      </div>

</div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import { Search,Calendar  } from '@element-plus/icons-vue'
export default{
    name:'AddCourse',
    setup(props,context){
        const router =  useRouter()
        const route = useRoute()            
        function backCourse() {
            // router.push({name:'course'})
            context.emit('closeclick',false)
            // console.log(context);
        }

        return{
            Search,
            Calendar,
            backCourse
        }
    }
}
</script>

<style lang="less" scoped>


    .header-input{
        width: 180px;
        margin-top: 40px;
        margin-left: 100px;
        padding-left: 20px;
        border: 1px #666 solid;
        border-radius: 30px;
        background-color: #c2dae2;
    }

    .content{
        position: relative;
        width: 800px;
        height: 480px;
        background-color: #e0eef2;
        margin: auto;
        margin-top: 50px;
        border-radius: 50px;
        .titleText{
               position: absolute;
               top: 20px;
               left: 40px;
               font-size: 20px;
               color: rgb(62, 148, 173);
        }
        .down-icon{
               position: absolute;
               top: 16px;
               right: 50px;
               cursor:pointer;
        }
        .langHr{
            position: absolute;
            height: 1px;
            width:720px;
            left: 40px;
            top:80px;
            z-index: 20;
            border: 1px solid rgb(194, 218, 226);
            background-color: rgb(194, 218, 226);
        }
        .shortHr{
            position: absolute;
            // height: 1px;
            // width:720px;
            left: 40px;
            top:80px;
            z-index: 21;
            width: 200px;
            border: 4px solid rgb(62, 148, 173);
            margin-top: -3px;
            border-radius: 20px;
            background-color: rgb(62, 148, 173);

        }
        .form{
            
            width: 600px;
            // border: #666 1px solid;
            // margin: 50% 50%;
        	transform:translate(16%,55%);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .el-row{
                // margin-left: 50px;
                width: 180px;
                font-size: 15px;
                // margin-right:50px;
            }
            .input-last{
                width: 300px;
            }
            .textarea{
                width: 600px;
            }
            .btn{
               position: relative;
               top: 30px;
                margin: auto;
                width: 160px;
                height: 35px;
                
            }

        }
    }
</style>